import React, { useRef } from "react";
import Navbar from "../../components/navbar";
import styles from "./css/add.module.css";
import { CameraOutline } from "antd-mobile-icons";
import { Button, Card, Space, Form, Input, Radio, Toast } from "antd-mobile";
import { addPsg, editPsg, getocr } from "../../api/info";
import { useLocation, useNavigate } from "react-router-dom";
function Add() {
  let nav = useNavigate();
  let loca = useLocation();
  let fRef = useRef(null);
  // console.log(loca.state);
  const fill = () => {
    fRef.current?.click();
  };
  const [form] = Form.useForm();
  const fillchange = (e) => {
    const files = e.target.files;
    if (files.length === 0) return;
    let fr = new FileReader();
    fr.readAsDataURL(files[0]);
    fr.onload = async () => {
      const { data: res } = await getocr({
        client_id: "TBRr1X3G7EH6TS8aeNcVGT1X",
        client_secret: "R07zIrN5PZNFRY6P7jQYIk3uaqbufH60",
        image: fr.result,
      });
      // console.log(fr.result);
      // console.log(res);
      form.setFieldsValue({
        p_type: res.ticket_type,
        name: res.name,
        c_type: res.card_type,
        card_no: res.code,
      });
    };
  };
  const onFinish = async (values) => {
    // console.log(values);
    try {
      if (loca.state) {
        await editPsg(values);
      } else {
        await addPsg(values);
      }
      nav(-1);
    } catch (err) {
      console.log(err);
      Toast.show("身份证号码已被占用");
    }
  };
  return (
    <div className={styles.box}>
      <Navbar title="乘客管理" />
      <Button
        style={{ background: "#fff" }}
        block
        color="primary"
        fill="outline"
        onClick={fill}
      >
        <CameraOutline /> 扫描证件添加
      </Button>
      <input
        type="file"
        accept="image/*"
        onChange={fillchange}
        ref={fRef}
        style={{ display: "none" }}
      />
      <Card className={styles.card} style={{ marginBottom: "60px" }}>
        <Form
          form={form}
          layout="horizontal"
          initialValues={
            loca.state || { p_type: "成人票", c_type: "中国大陆身份证" }
          }
          style={{
            "--prefix-width": "55px",
            "--border-top": "none",
            "--border-bottom": "none",
          }}
          onFinish={onFinish}
          footer={
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
          }
        >
          <Form.Item name="id" label="ID" style={{ display: "none" }}>
            <Input />
          </Form.Item>
          <Form.Item
            name="p_type"
            label="乘客类型"
            rules={[{ required: true, message: "请选择乘客类型" }]}
          >
            <Radio.Group>
              <Space direction="horizontal">
                <Radio value={"成人票"}>成人票</Radio>
                <Radio value={"学生票"}>学生票</Radio>
                <Radio value={"儿童票"}>儿童票</Radio>
              </Space>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="name"
            label="乘客姓名"
            rules={[{ required: true, message: "姓名不能为空" }]}
          >
            <Input placeholder="与乘客证件姓名一致" />
          </Form.Item>
          <Form.Item
            name="c_type"
            label="证件类型"
            rules={[{ required: true, message: "请选择证件类型" }]}
          >
            <Radio.Group>
              <Space direction="horizontal">
                <Radio value={"中国大陆身份证"}>中国大陆身份证</Radio>
                <Radio value={"港澳居住证"}>港澳居住证</Radio>
              </Space>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="card_no"
            label="证件号码"
            rules={[
              { required: true, message: "证件号码不能为空" },
              {
                pattern: /^\d{17}[xX]|\d{18}$/,
                message: "证件号码格式不正确",
              },
            ]}
          >
            <Input placeholder="请输入证件号码" />
          </Form.Item>
          <Form.Item
            name="phone"
            label="联系号码"
            validateFirst
            rules={[
              { required: true, message: "手机号码不能为空" },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "请输入合适的手机号码",
              },
            ]}
          >
            <Input placeholder="请输入手机号码" />
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export default Add;
